<template>
    <div class="app">
   <div class="contain">
   <div class="banner">
   <!-- 轮播图 -->
  <Banner></Banner>

            </div>
            <!-- 轮播图上的商品 -->
            <Left class="left"/> 
            </div>
        <!-- 内容1 -->
        <Band 
                ref='target'
               h3Title='新鲜好物'
              :list='$store.state.home.NewData'

        ></Band>
<!-- 内容2 -->
   <Band   
   
             h3Title='人气推荐'
              tagone='人气爆款'
              tagtow='不容错过'
            :list='goodsList'

        ></Band>
        <!-- 图片 -->
<!-- <img v-lazy="info.urlImg" /> -->

        <!-- 内容3 -->
           <div class="HotBrand">
           <Band 
             h3Title='热门品牌'
              tagone='国际经典'
              tagtow='品牌保证'
             
        ></Band>
           </div>
    </div>
</template>

<script setup>
import Banner from '@/views/category/components/banner.vue'
import Left from './components/leftBox.vue'
import Band from './components/band.vue'
import Skeleton from '@/components/library/Skeleton.vue'
// import Right from './components/rightBox.vue'
import {useLazyData} from '@/hooks/lazyload'
import 'swiper/dist/css/swiper.min.css'
import Swiper from 'swiper'


import { useStore, } from 'vuex'
import {ref,computed,reactive,refs,mounted} from 'vue'
const store = useStore()
const cage = computed(()=>{
    return store.state.home.categoryList
 })

	new Swiper('.swiper-container', {
		//direction: 'vertical', // 垂直切换选项
		//mousewheel: true, //滚轮
		autoplay: { //自动开始
			delay: 2500, //时间间隔
			disableOnInteraction: false, //*手动操作轮播图后不会暂停*
		},
		loop: true, // 循环模式选项

    	// 如果需要分页器
		pagination: {
			el: '.swiper-pagination',
			clickable: true, // 分页器可以点击
		},

		// 如果需要前进后退按钮
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		
		// 如果需要滚动条
		scrollbar: {
			el: '.swiper-scrollbar',
		},
	}) 

    const goodsList = computed(()=>{
    const list =store.state.home.HotData.map(item =>{
     return {
    id:item.id,
    picture:item.picture,
    desc:item.title,
    price:item.alt
  
    }
        })
        return list
    })
    const New = reactive({
    h3Title:'新鲜好物',
    tagone:'新鲜出炉',
    tagtow:'品质靠谱',
    more:'查看更多 >',
    list:[2,3,4,5]

}) 
   const target = ref([])
   const result = useLazyData(target, store.dispatch('getHot'))
</script>

<style lang='less' scoped>
.app{
    width: 100%;
   
    background-color: #F5F5F5;
}
.contain{

    height: 100%;
   
}


.banner{
    width: 100%;
    height: 100%;
    background-color: rgb(42, 14, 109);
}
ul{
     color: #fff;
    li{
        color: #fff;
        list-style: none;
    }
}
.left{
    position: absolute;
    top: 0;
    z-index: 2;
}
.right{
    position: absolute;
    top: 0;
    left: 250px;
    z-index: 2;
}
.HotBrand{
    width: 100%;
    background-color: #F5F5F5;
}


</style>